<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="common/common_head :: commonHeader('采购申请录入')"/>
    <link th:href="@{/static/css/plugins/cropper/cropper.min.css}" rel="stylesheet">
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal" method="post" id="nproPurchRequestHeaderForm">
        <div class="row">
            <div class="form-group">
                <div class="col-sm-8" style="margin-left: 16px">
                    <input class="btn btn-primary" type="button" onclick="save()" value="保存">
                    <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
                </div>
            </div>
			<div>
			    <div class="ibox float-e-margins">
			        <div class="ibox-content" id="dataTitle">
	                   <div class="form-group">
                            <label class="col-xs-1 control-label">采购申请类型：</label>
                            <div class="col-xs-3">
                                <input name="pkId" type="hidden" th:value="${nproPurchRequestHeaderEntity.pkId}" />
                            	<select class="form-control" id="purchRequestType" name="purchRequestType" th:data-val="${nproPurchRequestHeaderEntity.purchRequestType}" sysDict="CGSQLX"></select>
                            </div>
			                <label class="col-xs-1 control-label"> 创建人：</label>
                            <div class="col-xs-3">
                                <input name="purchRequestStaff" type="text" class="form-control" th:value="${nproPurchRequestHeaderEntity.createdBy}" readonly="readonly" />
                            </div>
                            <label class="col-xs-1 control-label">申请部门：</label>
                            <div class="col-xs-3">
                                <select class="form-control" id="purchRequestDept" name="purchRequestDept" th:data-val="${nproPurchRequestHeaderEntity.purchRequestDept}" sysDict="BM"></select>
                            </div>
			         </div>
			         <div class="form-group">
			                <label class="col-xs-1 control-label">采购组：</label>
                            <div class="col-xs-3">
                                <select class="form-control" id="purchGroup" name="purchGroup" sysDict="CGZ"></select>
                            </div>
			         </div>
	                </div>
	                <div class="ibox-content">
		                <div id="toolbar" class="btn-group">
						    <button type="button" class="btn btn-xs btn-link" onclick="addtr()">添加</button>
						</div>
						<div class="table-responsive">
						  <table class="table table-bordered text-nowrap" id="para_table">
						       <thead>
									<tr>
									    <th>采购申请编码</th>
									    <th>采购申请行项目编码</th>
									    <th>科目类别</th>
									    <th>采购组</th>
									    <th>采购组织</th>
									    <th>使用人</th>
									    <th>物料描述</th>
									    <th>工厂</th>
									    <th>库存地点</th>
									    <th>物料组</th>
									    <th>申请数量</th>
									    <th>计量单位</th>
									    <th>成本中心</th>
									    <th>内部订单号</th>
									    <th>主资产号</th>
									    <th>资产次级编号</th>
									    <th>需求日期</th>
									    <th>交货日期</th>
									    <th>交货地址</th>
									    <th>备注</th>
									    <th>操作</th>
									</tr>
								</thead>
								<tbody>
								     <tr th:each="NproPurchRequestItemEntity : ${itemlist}">
								        <td style="display:none"><input name="pkId" type="hidden" th:value="${NproPurchRequestItemEntity.pkId}" /></td>
								        <td width='30px'><input name='purchRequestCode' th:value="${NproPurchRequestItemEntity.purchRequestCode}" /></td>
								        <td width='110px'><input style='width:95%' type='text' name='purchRequestItemCode' th:value="${NproPurchRequestItemEntity.purchRequestItemCode}" /></td>
								        <td width='110px'><input style='width:95%' type='text' name='subjectCategory' th:value="${NproPurchRequestItemEntity.subjectCategory}"/></td>
								        <td width='110px'><select style='width:95%' name='purchGroup' th:data-val="${NproPurchRequestItemEntity.purchGroup}" sysDict='CGZ'></select></td>
									    <td width='110px'><select style='width:95%' name='purchOrg' th:data-val="${NproPurchRequestItemEntity.purchOrg}" sysDict='CGZZ'></select></td>
									    <td width='110px'><input style='width:95%' type='text' name='usePeople' th:value="${NproPurchRequestItemEntity.usePeople}"/></td>
									    
									    <td width='110px'><input style='width:95%' type='text' name='materialDesc' th:value="${NproPurchRequestItemEntity.materialDesc}"/></td>
									   
									    <td width='110px'><select style='width:95%' name='factory' th:data-val="${NproPurchRequestItemEntity.factory}" sysDict='GC'></select></td>
									    <td width='110px'><select style='width:95%' name='storageLocation' th:data-val="${NproPurchRequestItemEntity.storageLocation}" sysDict='KCDD'></select></td>
									    <td width='110px'><select style='width:95%' name='materialGroup' th:data-val="${NproPurchRequestItemEntity.materialGroup}" sysDict='WLZ'></select></td>
									    <td width='110px'><input style='width:95%' type='text' name='applyQty' th:value="${NproPurchRequestItemEntity.applyQty}" /></td>
									    <td width='110px'><select style='width:95%' name='measureUnit' th:data-val="${NproPurchRequestItemEntity.measureUnit}" sysDict='JLDW'></select></td>
									    <td width='110px'><select style='width:95%' name='costCenter' th:data-val="${NproPurchRequestItemEntity.costCenter}" sysDict='CBZX'></select></td>
									    <td width='110px'><input style='width:95%' type='text' name='internalOrderCode' th:value="${NproPurchRequestItemEntity.internalOrderCode}" /></td>
									    <td width='110px'><input style='width:95%' type='text' name='mainAssetsCode' th:value="${NproPurchRequestItemEntity.mainAssetsCode}" /></td>
									    <td width='110px'><input style='width:95%' type='text' name='assetsSencondCode' th:value="${NproPurchRequestItemEntity.assetsSencondCode}" /></td>
									    <td width='110px'><input style='width:95%' type='text' name='requestDate' th:value="${NproPurchRequestItemEntity.requestDate}"/></td>
									    <td width='110px'><input style='width:95%' type='text' name='deliveryDate' th:value="${NproPurchRequestItemEntity.deliveryDate}"/></td>
									    <td width='110px'><select style='width:95%' name='deliveryAddress' sysDict='JHDZ'></select></td>
									    <td width='110px'><input style='width:95%' type='text' name='remark' th:value="${NproPurchRequestItemEntity.remark}" /></td>
									    <td width='110px'></td>
									    <!-- <td width='30px' align='center' onclick='deletetr(this)'><button type='button' class='btn btn-xs btn-link'>删除</button></td> -->
									  </tr>
								</tbody>
							</table>
						</div>
                    </div>
			</div>
		</div>
      </div>
   </form>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<!-- Chosen -->
<script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>

<script type="text/javascript">
    
    //动态加载一行
    function addtr() {
		//获取选中的option
		var options=$("#purchRequestType option:selected");
		//拿到选中项的文本
		var purchRequestType = options.text();
		
		//获取选中的option
		var options=$("#purchGroup option:selected");
		//拿到选中项的文本
		var purchGroup = options.val();
		var purchGroupText = options.text();
		
		if(purchRequestType==null||purchRequestType=="undefined"||purchRequestType==""){
			alert("请选中采购申请类型");
			return;
		}
		
		if(purchGroup==null||purchGroup=="undefined"||purchGroup==""){
			alert("请选择采购组");
			return;
		}
		
		var subjectCategory, subjectCategoryText;
		
		if(purchRequestType == 'ZFY-部门费用类申请'){ //ZFY-费用类申请, ZGD-固定资产类申请, ZNB-在建工程类申请
			subjectCategory = 'K';
			subjectCategoryText = 'K-成本中心';
		}else if(purchRequestType == 'ZGD-固定资产类申请'){
			subjectCategory = 'A';
			subjectCategoryText = 'A-固定资产';
		}else if(purchRequestType == 'ZNB-在建工程类申请'){
			subjectCategory = 'F';
			subjectCategoryText = 'F-在建工程';
		}
		
		var mydate = new Date();
		var uuid = "rdn"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds();//根据时间来自动生成uuid，保证生成的id是唯一的

		var trCode = "<tr>";
	    trCode += "<td width='30px'><input name='purchRequestCode' /></td>";
	    trCode += "<td width='110px'><input style='width:95%' type='text' name='purchRequestItemCode' /></td>";
	    trCode += "<td width='110px'><input style='width:95%' type='text' name='subjectCategory' /></td>";
	    trCode += "<td width='110px'><select style='width:95%' name='purchGroup' dictType='CGZ'></select></td>";
	    trCode += "<td width='110px'><select style='width:95%' name='purchOrg' dictType='CGZZ'></select></td>";
	    trCode += "<td width='110px'><input style='width:95%' type='text' name='usePeople' /></td>";
	    trCode += "<td width='110px'><input style='width:95%' type='text' name='materialDesc' /></td>";
	    trCode += "<td width='110px'><select style='width:95%' name='factory' dictType='GC'></select></td>";
	    trCode += "<td width='110px'><select style='width:95%' name='storageLocation' dictType='KCDD'></td>";
	    trCode += "<td width='110px'><select style='width:95%' name='materialGroup' dictType='WLZ'></select></td>";
	    trCode += "<td width='110px'><input style='width:95%' type='text' name='applyQty' /></td>";
	    trCode += "<td width='110px'><select style='width:95%' name='measureUnit' dictType='JLDW'></td>";
	    trCode += "<td width='110px'><select style='width:95%' name='costCenter' dictType='CBZX'></select></td>";
	    trCode += "<td width='110px'><input style='width:95%' type='text' name='internalOrderCode' /></td>";
	    trCode += "<td width='110px'><input style='width:95%' type='text' name='mainAssetsCode' /></td>";
	    trCode += "<td width='110px'><input style='width:95%' type='text' name='assetsSencondCode' /></td>";
	    trCode += "<td width='110px'><input style='width:95%' type='text' name='requestDate' /></td>";
	    trCode += "<td width='110px'><input style='width:95%' type='text' name='deliveryDate'/></td>";
	    trCode += "<td width='110px'><select style='width:95%' name='deliveryAddress' dictType='JHDZ'></select></td>";
	    trCode += "<td width='110px'><input style='width:95%' type='text' name='remark' /></td>";
	    trCode += "<td width='30px' align='center' onclick='deletetr(this)'><button type='button' class='btn btn-xs btn-link'>"+"删除"+"</button></td>";
	    trCode += "</tr>";
	    $("#para_table tbody").append(trCode);
	    
        // 初始化时间插件
        laydate.render({elem: '#requestDateId'+uuid});
        laydate.render({elem: '#deliveryDateId'+uuid});
        
       //自动往select框里面填充字典数据
        	var sels = $("select[dictType]");
        	sels.each(function(i, e) {
        		e = $(e);
        		if(e.attr("filled")=="true") {
        			return;
        		}
        		//通过此属性来回显默认选中的
        		var defaultVal = e.attr("data-val");
        		if(e.attr("emptyFirst")=="true") {
        			e.append("<option value=''></option>");// 添加一个空的option
        		}
        		//得到此属性的值查询字典表里的文本开回显到下拉框下
        		var dictTypeName = e.attr("dictType");
        		Page.ajaxGET(ctxPath + "/sys/dict/getDictData", {'dictTypeName':dictTypeName}, function(o) {
        			var res = o.result;
                    for(var k in res){
                    	if(defaultVal == k) {
                    		e.append("<option value='"+k+"' selected>"+res[k]+"</option>");// 添加option
                    	} else {
                    		e.append("<option value='"+k+"'>"+res[k]+"</option>");// 添加option
                    	}
                    }
                    e.attr("filled", "true")
        		}, {
        			async : false
        		});
        	});
    }
    
    function deletetr(tdobject) {
	    var td = $(tdobject);
	    td.parents("tr").remove();
    }

    $(function() {
	    initDictDataSel();//初始化所有字典数据
	    //抬头
    	$("#purchRequestType").change(function() {
    		
    		var tds = $("#para_table").find("td[name='subjectCategoryText']");
    		var _this = $(this);
    		
    		var checkText=_this.find("option:selected").text();  //获取Select选择的Text
    		var subjectCategory, subjectCategoryText;
    		
			if(checkText == 'ZFY-部门费用类申请'){ //ZFY-费用类申请, ZGD-固定资产类申请, ZNB-在建工程类申请
				subjectCategory = 'K';
				subjectCategoryText = 'K-成本中心';
			}else if(checkText == 'ZGD-固定资产类申请'){
				subjectCategory = 'A';
				subjectCategoryText = 'A-固定资产';
			}else if(checkText == 'ZNB-在建工程类申请'){
				subjectCategory = 'F';
				subjectCategoryText = 'F-在建工程';
			}
    	    //遍历
    		tds.each(function(index, item) {
    			item = $(item);
    			item.find("span[name='subjectCategorySpan']").text(subjectCategoryText);//文本
    			item.find("input[name='subjectCategory']").val(subjectCategory);//隐藏域
    		});
    	});
	    
    	$("#purchGroup").change(function() {
    		//获取选中的option
    		var options=$("#purchGroup option:selected");
    		//拿到选中项的文本
    		var purchGroup = options.val();
    		var purchGroupText = options.text();
    		var tds = $("#para_table").find("td[name='purchGroupText']");
    		var _this = $(this);
    		//通过遍历更新所有的采购组
    		tds.each(function(index, item) {
    			item = $(item);
    			item.find("span[name='purchGroupSpan']").text(purchGroupText);//文本
    			item.find("input[name='purchGroup']").val(purchGroup);//隐藏域
    		});
    	});
    });

    /**
    * 封装并提交数据
    **/
    function save() {
    	var data = {"nproPurchRequestHeaderEntity" : {}, "nproPurchRequestItemEntity" : []};//先定义数据结构，head是一个对象，item是一个数组
		//得到head div 下的 input select
    	var dataTitle = $("#dataTitle").find("input, select");
		dataTitle.each(function(index, item) {//循环遍历，把head的内容塞进head对象
			data.nproPurchRequestHeaderEntity[$(item).attr("name")] = $(item).val();
		});
		//得到行项目数据
		var trs = $("#para_table").find("tr");
		trs.each(function(index, tr) {//循环遍历，把item的内容塞进一个item对象，然后加到数组里
			var itemEntity = {};
			var its = $(tr).find("input, select");
			its.each(function(idx, it) {//循环遍历，把item的内容塞进一个item对象，然后加到数组里
				itemEntity[$(it).attr("name")] = $(it).val();
			});
			data.nproPurchRequestItemEntity.push(itemEntity);
    	});
		
		
		 $.ajax({
				type: "POST",
				url: ctxPath + "/nproPurchRequestHeader/update",
				data: JSON.stringify(data),//必须
				contentType : "application/json;charsetset=UTF-8",//必须
				dataType:"json",//必须
				cache: true,
				async: false,
				error: function (request) {
				      showTipAlert("Connection error");
				},
			 });
		alert(JSON.stringify(data));
    }
</script>

</body>
</html>
